<template>
	<view>
		<view class="orderDetails">
			<!-- 订单状态 -->
			<view class="status round">
				<view class="top">
					<uni-icons custom-prefix="iconfont" type="icon-daishouhuo" :size="20" color="#a397fd" />
				<text>已签收</text>
				</view>
				<text class="bottom">您的订单已签收。如有问题请电话联系追光者运动商城。感谢您的购买，欢迎再次光临。</text>
			</view>
			<!-- 收货人信息 -->
			<view class="receiver round">
				<view class="top">
					<uni-icons type="person" size="20" color="#a397fd"></uni-icons>
				<text>{{data.emailname}}</text>
				<text>收件人电话:{{data.tel}}</text>
				</view>
				<view class="bottom">
					<text>{{data.user_address}}</text>
				</view>
				
			</view>
			<!-- 商品信息 -->
			<view class="commodity round">
				<view class="card">
					<view class="image">
						<image :src="$base+data.pic" mode="widthFix"></image>
					</view>
					<view class="text">
						<text class="title">{{data.title}}</text>
						<text class="price">¥{{data.price}}</text>
				<button>再次购买</button>
					</view>
				</view>
			</view>
			<!-- 订单支付 -->
			<view class="pay round">
				<text>订单编号：{{times}}</text>
				<text>下单时间：{{times}}</text>
				<text>支付方式：{{data.paylei==1?'微信':'支付宝'}}</text>
				<text>支付时间：{{times}}</text>
				<text>签收时间：{{times}}</text>
			</view>
			<!-- 支付金额 -->
			<view class="amount round">
				<view class="between">
					<text class="text">商品总额</text>
				<text class="rmb">¥{{data.price}}</text>
				</view>
				<view class="between">
					<text class="text">运费</text>
					<text class="rmb">¥{{data.freight}}</text>
				</view>
				<view class="between">
					<text class="text">优惠券</text>
					<text class="rmb">¥10.00</text>
				</view>
				<view class="right">
					<text class="rmb">¥{{data.price}}</text>
					<text class="text">实付款</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {orederxqcha} from '@/service/index.js'
	import {timeTrans} from '@/until/Gettime.js'
	export default {
		data() {
			return {
               data:'',
			   times:''
			}
		},
	async	onLoad(e) {
			let res=await orederxqcha(this.$uid,e.oid)
			console.log(res.result[0].deliver_time)
			this.data=res.result[0]
			let ss=timeTrans(res.result[0].deliver_time,1)
			this.times=ss
		},
		methods: {

		}
	}
</script>

<style lang="scss">
page{
	background-color: #eee;
	.orderDetails{
		// padding: 10rpx;
		.round{
			background-color: #fff;
			border-radius: 30rpx;
			margin: 10rpx;
			padding: 20rpx;
		} 
		.receiver,
		.status{
			.top{
				display: flex;
				align-items: center;
				text{
					display: block;
					margin-left: 10rpx;
				}
			}
			.bottom{
				color: #7a7a7a;
				font-size: 12px;
			}
		}
		.receiver{
			.bottom{
				width: 700rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.commodity{
			.card {
				height: 200rpx;
				background-color: #fff;
				display: flex;
				.image {
					image {
						width: 200rpx;
					}
				}
				.text {
					width: 60%;
					position: relative;
					text {
						display: block;
					}
			
					.title {
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.price {
						color: red;
						font-size: 18px;
						font-weight: bold;
						margin: 30rpx 0 20rpx 0;
					}
					button {
						width: 40%;
						height: 80rpx;
						font-size: 12px;
						line-height: 80rpx;
						position: absolute;
						right: 0;
						bottom: 10rpx;
						background-color: #a397fd;
						color: white
					}
				}
			}
		}
		.pay{
			text{
				display: block;
				font-size: 14px;
				margin: 0 10rpx;
				color: #909090;
			}
		}
		.amount{
			.between{
				display: flex;
				justify-content: space-between;
				.text{
					color: #909090;
					font-size: 14px;
				}
				.rmb{
					font-size: 14px;
				}
			}
			.right{
				font-size: 14px;
				display: flex;
				flex-direction:row-reverse;
				margin: 5px 0;
				.rmb{
					color:#bf2102;		
					margin-left:5px;}
			}
		}
	}
}
</style>
